<div class="portlet light bordered" style="margin: 15px;">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold"> Waiting List </span>
        </div>
        <div class="actions">
            <form>
            <input type="text" class="form-control" ng-model="serachId" placeholder="Enter Entry ID" style="padding-left:10px; margin-right: 10px;  width:250px; float:left;"
            />

            <waitting-btn type="submit" btn-class="btn blue" ng-click="searchEntryById(serachId)" value="'Search'" is-loading="!isLoadingComplete"></waitting-btn>
            <waitting-btn type="submit" btn-class="btn blue" ng-click="refreshWaitingAterTimer()" value="intervalName" ></waitting-btn>
        </form>
        </div>
    </div>
    <div ng-show="!isLoadingComplete" class="text-center">
        <img src="assets/img/loading-spinner-grey.gif"><span>&nbsp;LOADING...</span>
    </div>
    <div class="portlet-body entry-list" ng-show="isLoadingComplete">
        <table class="table table-striped table-bordered table-hover">
            <tr class="bold">
                <td style="width: 70px;">Entry</td>
                <td>Status</td>
                <td>Type</td>
                <td>Reason</td>
                <td>Priority</td>
                <td style="width: 100px;">Is OnTime</td>
                <td style="width: 60px;">Expedite</td>
                <td style="width: 300px;"  permission-check="{{'facility::checkinWaiting_write'}}"></td>
            </tr>
            <tr ng-repeat-start="entry in waittingListView track by $index">
                <td style="vertical-align: middle; width:100px" ng-click="selectEntry(entry, $event,$index)">{{entry.id}}

                    <i class="fa fa-plus-circle" ng-show="expandWaitingLine[$index] === false" style="color:#337ab7;padding-left: 10px;"></i>
                    <i class="fa fa-minus-circle" ng-show="expandWaitingLine[$index] === true" style="color:#337ab7;padding-left: 10px;"></i>
                    <!-- <a style="float:right" class="expand-a" ng-class="{'expand-new': expandWaitingLine[$index] === true,
                                                 'collapse-new': expandWaitingLine[$index] === false}">
                                            </a>
                                             -->
                </td>
                <td style="vertical-align: middle;">
                    {{entry.status}}
                </td>
                <td style="vertical-align: middle;">
                    <span ng-repeat="type in entry.checkInTypes">{{type}}&nbsp</span>
                </td>
                <td style="vertical-align: middle;">
                    <span ng-repeat="reason in waitInfoMap[entry.id].reasons">{{reason}}&nbsp</span>
                </td>


                <td>
                    {{waitInfoMap[entry.id].priority}}
                </td>
                <td style="text-align: center; vertical-align: middle;">
                    <i ng-show="waitInfoMap[entry.id].isOnTime == true" class="fa font-blue fa-check"></i>
                    <i ng-show="waitInfoMap[entry.id].isOnTime == false" class="fa font-red fa-close"></i>
                </td>


                <td style="text-align: center; vertical-align: middle;">
                    <i ng-show="entry.expediteFee" class="fa font-blue fa-check-square"></i>
                </td>
                <td style="vertical-align: middle;" permission-check="{{'facility::checkinWaiting_write'}}">
                    <a class="font-green" ng-click="changeExpedite(entry)" >Expedite Fee</a> |
                    <a ng-click="changePriority(entry)">Edit</a>
                    <a ng-click="readyToCheckIn(entry)" ng-show="waitInfoMap[entry.id].isReadyToCheckin== true"> | Check In</a>
                </td>
            </tr>
            <tr id="entryInfo" ng-repeat-end ng-show="expandWaitingLine[$index]" ] style="background: white;">
                <td></td>
                <td colspan="9" style="padding:15px 30px">
                    <table style="width: 100%;">
                        <tr>
                            <td style="padding:5px 0px">
                                <span class="bold">Carrier:</span> {{selectedEntry[$index].carrierName}}
                            </td>
                            <td>
                                <span class="bold">Driver:</span> {{selectedEntry[$index].driverName}}
                            </td>
                            <td>
                                <span class="bold">Equipment:</span> {{selectedEntry[$index].equipmentType}}
                            </td>
                            <td>
                                <span class="bold">CTNR:</span>
                                <span ng-repeat="No in selectedEntry[$index].containerNOs">{{No}}&nbsp</span>
                            </td>
                            <td>
                                <span class="bold">MC/Dot:</span> {{selectedEntry[$index].mcDot}}
                            </td>
                            <td>
                                <span class="bold">Contact:</span> {{waitInfoMap[selectedEntry[$index].id].contactType}}
                                <span ng-show="waitInfoMap[selectedEntry[$index].id].contactInfo">
                                     ({{waitInfoMap[selectedEntry[$index].id].contactInfo}})
                                 </span>
                            </td>

                        </tr>
                        <tr ng-repeat="receiptTask in receiptTaskMap[selectedEntry[$index].id]" style="background-color:#e9edef; text-align:center ">
                            <td style="padding:15px">
                                <span class="bold"> Receipt Task ID:</span>
                                <span>
                                    {{receiptTask.id}}
                                </span>
                            </td>
                            <td>
                                <span class="bold">Company Name:</span>
                                <span>
                                    {{receiptTask.companyName}}
                                </span>
                            </td>
                            <td ng-show="!receiptTask.dockId" colspan="4">
                                <span class="bold">Subscribed Dock:</span>
                                <span ng-repeat="subscribedDockId in receiptTask.subscribedDockIds">
                               {{loactionsMap[subscribedDockId].name+ ' ( '+loactionsMap[subscribedDockId].dockStatus +' ) ,'}}
                                </span>
                            </td>
                            <td ng-show="receiptTask.dockId" colspan="4">
                                <span class="bold">Selected Dock:</span>
                                <span>
                                    {{loactionsMap[receiptTask.dockId].name}}
                                </span>
                            </td>
                        </tr>
                        <tr ng-repeat="loadTask in loadTaskMap[selectedEntry[$index].id]" style="background-color:#e9edef; text-align:center ">
                            <td style="padding:15px">
                                <span class="bold">load Task ID:</span>
                                <span>
                                    {{loadTask.id}}
                                </span>
                            </td>
                            <td>
                                <span class="bold">Company Name:</span>
                                <span>
                                    {{loadTask.companyName}}
                                </span>
                            </td>
                            <td ng-show="!loadTask.dockId" colspan="4">
                                <span class="bold">Subscribed Dock:</span>
                                <span ng-repeat="subscribedDockId in loadTask.subscribedDockIds">
                                      {{loactionsMap[subscribedDockId].name+ ' ( '+loactionsMap[subscribedDockId].dockStatus +' ) ,'}}
                                </span>


                            </td>
                            <td ng-show="loadTask.dockId" colspan="4">
                                <span class="bold"> Selected Dock:</span>
                                <span>
                                    {{loactionsMap[loadTask.dockId].name}}
                                </span>
                            </td>
                        </tr>

                    </table>
                </td>
            </tr>
        </table>
        <pager total-count="waittingList.length" page-size="pageSize" load-content="loadContent(currentPage)"></pager>
    </div>

</div>